/*
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
 */
// 配置路由
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import Home from "../views/home.vue";
// import Contact from "../views/contact.vue";
// import Product from "../views/product/index.vue";
import Detail from "../views/detail.vue";
import Detail01 from "../views/detail01.vue";
import P1 from "../views/product/p1.vue";
import P2 from "../views/product/p2.vue";
import P3 from "../views/product/p3.vue";
import Footer from "../components/Footer.vue";
//创建路由对象
const router = createRouter({
  history: createWebHistory(), // 路由模式----history模式
  // history: createWebHashHistory(), //路由模式----Hash哈希模式 BOM--location.hash
  routes: [
    //路径与组件间的对应关系
    // {
    //   path: "/",
    //   redirect: "/home", //重定向
    // },
    {
      path: "/home",
      alias: "/", // 路径别名
      components: {
        default: Home, //给匿名的router-view渲染
        foot: Footer, //给name="foot"的router-view渲染
      },
    },
    {
      path: "/contact",
      component: () => import("../views/contact.vue"), //懒加载
    },
    {
      path: "/prod",
      component: () => import("../views/product/index.vue"), //懒加载
      children: [
        //配置子路由
        {
          path: "p1", //此处不加 /代表相对路径
          name: "my-p1", //路由名称
          component: P1,
        },
        {
          path: "p2",
          name: "my-p2", //路由名称
          component: P2,
        },
        {
          path: "p3",
          name: "my-p3", //路由名称
          component: P3,
        },
      ],
    },
    {
      path: "/detail/:id", //设置形参
      component: Detail,
    },
    {
      path: "/detail01",
      component: Detail01,
    },
    {
      path: "/:pathMatch(.*)*", //匹配不存在的路由
      component: () => import("../views/not-found.vue"),
    },
  ],
});
export default router;
